<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<link rel="import" href="../common/cr-action.html">
<link rel="import" href="../common/cr-date.html">
<link rel="import" href="cr-patchset-edit-dialog.html">

<polymer-element name="cr-patchset-header" attributes="patchset">
    <template>
        <style>
            :host {
                display: block;
                background: #F6F6F6;
                border-bottom: 1px solid #ebebeb;
                display: -webkit-flex;
                display: flex;
                padding: 0.5em 16px;
                position: relative;
            }

            .patchset-title {
                display: -webkit-flex;
                display: flex;
                font-weight: bold;
                flex: 1;
                -webkit-flex: 1;
            }

            .patchset-actions,
            .patchset-comments,
            .patchset-date {
                margin-left: 8px;
            }
        </style>
        <div class="patchset-title" title="{{ patchset.id }}">
            Patch {{ patchset.sequence }}<template if="{{ patchset.title }}">: {{ patchset.title }}</template>
        </div>
        <div class="patchset-comments">
            {{ patchset.messageCount - patchset.draftCount | pluralize("comment") }}
            <template if="{{ patchset.draftCount }}">
                <template if="{{ patchset.messageCount - patchset.draftCount }}">,</template>
                {{ patchset.draftCount | pluralize("draft") }}
            </template>
        </div>
        <div class="patchset-date"><cr-date date="{{ patchset.created }}" relative></cr-date></div>
        <div class="patchset-actions">
            <template if="{{ patchset.issue.owner.isCurrentUser }}">
                <a is="cr-action" on-tap="{{ showEditDialog }}">Edit</a>
            </template>
        </div>
        <div id="dialogs" on-tap="{{ handleDialogTap }}"></div>
    </template>
    <script>
        Polymer({
            created: function() {
                this.patchset = null;
            },
            pluralize: function(count, text) {
                if (!count)
                    return "";
                if (count == 1)
                    return count + " " + text;
                return count + " " + text.pluralize();
            },
            handleDialogTap: function(event) {
                // Tapping on a dialog shouldn't collapse the header.
                event.stopPropagation();
            },
            showEditDialog: function(event) {
                // Don't collapse the patchset.
                event.stopPropagation();
                var dialog = document.createElement("cr-patchset-edit-dialog");
                dialog.patchset = this.patchset;
                dialog.addEventListener("close", function() {
                    dialog.remove();
                });
                this.$.dialogs.appendChild(dialog);
                dialog.showModal();
            },
        });
    </script>
</polymer-element>
